<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../js/angular.min.js"></script>

	<body>
		<div ng-app="myapp" ng-controller="myctl">
			<table width="800" border="1">
				<tr>
					<th>序号</th>
					<th>商品编号</th>
					<th>商品名称</th>
					<th>价格</th>
				</tr>
				<tr ng-repeat='product in products'>
					<th>{{$index + 1}}</th>
					<th>{{product.id}}</th>
					<th>{{product.name}}</th>
					<th>{{product.price}}</th>
				</tr>
			</table>
		</div>
		
		<script>
			// 定义该模块下的控制器 
			// 依赖注入 ，$scope作用域对象，操作当前作用域下的视图，例如：为name的视图赋值。 
			var myapp = angular.module('myapp',[]);
			
			myapp.controller('myctl',function($scope){
				$scope.products = [{
					id : 1001,
					name : '数码相机',
					price : 3000
				},
				{
					id : 1002,
					name : '苹果手机',
					price : 7000
				}]
			});
		</script>
	</body>

</html>